/**
 * 备选车次
 * @email 626097912@qq.com
 * Created by dength on 2017/04/11
 */
import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TouchableOpacity,
    Image,
    ScrollView
} from 'react-native';
import BaseComponent from '../base/baseComponent';
import Constants from '../base/constants';
import CommonStyles from '../base/commonStyles';
import CheckBox from 'react-native-check-box';

var data = [{checked :true}];

class TrainNumber extends BaseComponent {
    constructor(props) {
        super(props);
    }

    getNavigationBarProps() {
        return {
            title: '备选车次',
            leftButtonImage: require('../images/ic_return.png'),
            hideRightButton: true,
        };
    }

    onClick(data) {
        data.checked = !data.checked;
    }
    renderBody() {
        return (
            <View style={styles.container}>
                <View style={styles.Prompt}>
                    <View style={styles.Prompt_box}>
                        <Text style={styles.Prompt_box_tx}>请选择备选车次：（最多11个）</Text>
                    </View>
                </View>
                <ScrollView showsVerticalScrollIndicator={false}>
                    <View style={styles.center_box}>
                        <View style={{ marginTop: 15 }}>
                            <Image style={styles.images} source={require('../images/ic_trainNumber.png')}>
                                <View style={styles.inside_box}>
                                    <View style={styles.train_box}>
                                        <View style={styles.train_box_t}>
                                            <View style={styles.train_box_t_li}>
                                                <Text style={styles.train_box_t_li_tx}>长沙</Text>
                                            </View>
                                            <View style={[styles.train_box_t_li, { alignItems: 'center' }]}>
                                                <Text style={styles.train_box_t_li_tx}>K9075</Text>
                                                <View style={styles.img_position}>
                                                    <Image style={{ width: 50, height: 4 }} source={require('../images/ic_trainNumber_xian.png')} />
                                                </View>
                                            </View>
                                            <View style={[styles.train_box_t_li, { alignItems: 'center' }]}>
                                                <Text style={styles.train_box_t_li_tx}>深圳</Text>
                                            </View>
                                        </View>
                                        <View style={styles.train_box_t}>
                                            <View style={styles.train_box_t_li}>
                                                <Text>00:31</Text>
                                            </View>
                                            <View style={[styles.train_box_t_li, { alignItems: 'center' }]}>
                                                <Text>10时48分</Text>
                                            </View>
                                            <View style={[styles.train_box_t_li, { alignItems: 'center' }]}>
                                                <Text>11:49</Text>
                                            </View>
                                        </View>
                                    </View>
                                    <View style={styles.radio}>
                                        <CheckBox
                                            onClick={() => this.onClick(data)}
                                            isChecked={data.checked}
                                            checkedImage={<Image source={require('../images/ic_radio.png')} style={{ width: 22, height: 22 }} />}
                                            unCheckedImage={<Image source={require('../images/ic_unradio.png')} style={{ width: 22, height: 22 }} />}
                                            />
                                    </View>
                                </View>
                                <View style={styles.inside_box}>
                                    <View style={styles.bottom_box}>
                                        <Text style={styles.bottom_box_tx}>硬座：</Text>
                                        <Text style={styles.bottom_box_tx}>99张</Text>
                                    </View>
                                    <View style={styles.bottom_box}>
                                        <Text style={styles.bottom_box_tx}>硬卧：</Text>
                                        <Text style={styles.bottom_box_tx}>2张</Text>
                                    </View>
                                    <View style={styles.bottom_box}>
                                        <Text style={styles.bottom_box_tx}>软卧：</Text>
                                        <Text style={styles.bottom_box_tx}>3张</Text>
                                    </View>
                                    <View style={styles.bottom_box}>
                                        <Text style={styles.bottom_box_tx}>无座：</Text>
                                        <Text style={styles.bottom_box_tx}>99张</Text>
                                    </View>
                                </View>
                            </Image>
                        </View>



                    </View>
                    <View style={{ marginBottom: 65 }}></View>
                </ScrollView>
                <View style={{ position: 'absolute', bottom: 0, width: Constants.window.width }}>
                    <TouchableOpacity
                        activeOpacity={1}
                        style={styles.buttom}
                        >
                        <Text style={styles.buttom_text}>确定</Text>
                    </TouchableOpacity>
                </View>

            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: CommonStyles.colors.background,
    },
    Prompt: {
        backgroundColor: CommonStyles.colors.promptBG
    },
    Prompt_box: {
        marginLeft: 15, marginRight: 15, height: 30, justifyContent: 'center'
    },
    Prompt_box_tx: {
        fontSize: 10, color: '#555555'
    },
    center_box: {
        marginLeft: 15, marginRight: 15,
    },
    images: {
        width: Constants.window.width - 30, height: 90
    },
    train_box: {
        marginTop: 10, flexDirection: 'column', width: Constants.window.width - 60 - 50, height: 60
    },
    train_box_t: {
        width: Constants.window.width - 60 - 50, height: 25, flexDirection: 'row'
    },
    train_box_t_li: {
        width: (Constants.window.width - 60 - 50) / 3, height: 25,
    },
    train_box_t_li_tx: {
        fontSize: 16, fontWeight: 'bold', color: '#000'
    },
    inside_box: {
        flexDirection: 'row', marginLeft: 15, marginRight: 15
    },
    radio: {
        width: 50, height: 60, justifyContent: 'center', alignItems: 'center',
    },
    img_position: {
        position: 'absolute', bottom: 0, right: (((Constants.window.width - 60 - 50) / 3) - 50) / 2
    },
    bottom_box: {
        flexDirection: 'row', alignItems: 'center', width: (Constants.window.width - 60) / 4, height: 20
    },
    bottom_box_tx: {
        fontSize: 12
    },
    buttom: {
        height: 48.5, backgroundColor: '#FF8B00', alignItems: 'center', justifyContent: 'center',
    },
    buttom_text: {
        color: CommonStyles.colors.white, fontSize: 12
    },
});

export default TrainNumber;